<template>
  <div class="cyberpunk-wrapper">
    <div class="cyberpunk-container">
      <div class="cyberpunk-login">
        <div class="cyberpunk-header">
          <h2 class="cyberpunk-title">SYSTEM LOGIN</h2>
          <div class="cyberpunk-line"></div>
        </div>
        <form @submit.prevent="login" class="cyberpunk-form">
          <div class="cyberpunk-input-group">
            <input 
              placeholder="USERNAME" 
              id="phone" 
              v-model="user.phone" 
              type="text" 
              autocomplete="off" 
              required
              class="cyberpunk-input"
            />
            <span class="cyberpunk-highlight"></span>
            <span class="cyberpunk-bar"></span>
          </div>

          <div class="cyberpunk-input-group">
            <input 
              placeholder="PASSWORD" 
              id="password" 
              v-model="user.userPassword" 
              type="password" 
              autocomplete="off" 
              required
              class="cyberpunk-input"
            />
            <span class="cyberpunk-highlight"></span>
            <span class="cyberpunk-bar"></span>
          </div>

          <button type="submit" class="cyberpunk-button">
            <span class="cyberpunk-button-text">ACCESS</span>
            <span class="cyberpunk-button-glitch"></span>
            <span class="cyberpunk-button-detail"></span>
          </button>
          
          <!-- 新增的注册按钮 -->
          <button 
            type="button" 
            class="cyberpunk-button secondary"
            @click="goToRegister"
          >
            <span class="cyberpunk-button-text">REGISTER</span>
            <span class="cyberpunk-button-glitch"></span>
            <span class="cyberpunk-button-detail"></span>
          </button>
        </form>
        <div class="cyberpunk-grid">
          <div class="cyberpunk-grid-line"></div>
          <div class="cyberpunk-grid-line"></div>
          <div class="cyberpunk-grid-line"></div>
        </div>
      </div>
      <div class="cyberpunk-scanline"></div>
    </div>
  </div>
</template>

<script setup>
import {ref} from 'vue'
import request from '@/util/request.js'
import {ElMessage} from 'element-plus'
import router from '@/router/index.js'

const user = ref({
  phone: '',
  userPassword: ''
})

const login = () => {
  request
      .post('/user/login', user.value)
      .then((response) => {
        console.log('登录接口-后台返回的数据：', response)
        localStorage.setItem('token', response.data.tokenValue) 
        if (response.code === 200) {
          ElMessage.success('登录成功')
          router.push('/home')
        } else {
          ElMessage.error(response.message)
        }
      })
      .catch((error) => {
        console.log('登录失败-错误信息：', error)
      })
}

// 新增的注册跳转方法
const goToRegister = () => {
  router.push('/register')
}
</script>

<style scoped>
/* 原有样式保持不变，只新增以下样式 */

/* 次要按钮样式 */
.cyberpunk-button.secondary {
  margin-top: 15px;
  border-color: #ff00ff;
  color: #ff00ff;
}

.cyberpunk-button.secondary:hover {
  background: rgba(255, 0, 255, 0.1);
  box-shadow: 0 0 10px rgba(255, 0, 255, 0.5);
}

.cyberpunk-button.secondary .cyberpunk-button-glitch {
  background: linear-gradient(45deg, 
    transparent 45%, 
    #00ffff 45%, 
    #00ffff 55%, 
    transparent 55%);
}

/* 调整表单间距 */
.cyberpunk-form {
  margin-bottom: 10px;
}
</style>